<!DOCTYPE html>
<html lang="en">
<head>
    <div th:include="base-libs :: base-libs" />
    <meta charset="UTF-8">
    <title>新增/修改--家庭协议模板</title>
    <script th:inline="javascript">
        /**读取request中的初始化数据*/
//        var requestData = [[${requestData}]];
        var XYMBID = [[${XYMBID}]];
        var XYMBMC = [[${XYMBMC}]];
        var ZT = [[${ZT}]];
    </script>
    <link th:href="@{/service/css/xymb.css}" rel="stylesheet"/>
    <script th:src="@{/service/js/xymb.js}"></script>
    <script th:src="@{/service/js/xymb.js}"></script>

    <script th:src="@{/service/js/UEditor/template.min.js}"></script>
    <script th:src="@{/service/js/UEditor/umeditor.config.js}"></script>
    <script th:src="@{/service/js/UEditor/editor_api.js}"></script>


    <script type="text/javascript">

        var XYMBLX = "01";

        $(function () {
            /*模板ID有值 则查询改模板配置的实例*/
            if(!StringUtils.isEmpty(XYMBID)){
                $("#modelDiv").remove();
                $("#XYMBMC").val(XYMBMC);
                if(!StringUtils.isEmpty(ZT))$(".ZT[value="+ZT+"]").attr("checked",true);
                $("body").data("XYMB", {XYMBID: XYMBID, XYMBMC: XYMBMC, XYMBLX:XYMBLX});
                $.QuickRemote.AjaxJson("queryXymb", function(result){
                    var content = result["CONTENT"];
                    $("#center").append(content);
                    //编辑器初始化
                    initUEdit();
                    XymbMethod.initXymbData();
                }, {XYMBID: XYMBID});
            }else{
                /*请求静态模板文件---IE中无法获取*/
                /*$.QuickRemote.AjaxXML("getTemplate", function(result){
                    var content = result["documentElement"];
                    content = $(content).prop("outerHTML");
                    $.parser.parse($("#center").append(content));
                    //编辑器初始化
                    initUEdit();
                    XymbMethod.initXymbData();
                }, {template: "template-01-01"});*/
                initUEdit();
                XymbMethod.initXymbData();
            }
        })

        /** 初始化uEditor协议编辑器及其内容 */
        function initUEdit(){
            //step 1: 将协议内容div复制一份用于生成编辑器
            var ueditorBox = $("#xynrDiv").clone().attr({"id":"ueditorBox"}).css("minHeight","300px");
            $("#xynrDiv").parent().append(ueditorBox);
            UM.getEditor("ueditorBox").ready(function(){
                /* 将strong标签改为b标签(因为UEditor保存时默认把strong改为b了。。。)*/
                $(".edui-body-container strong").each(function(){
                    var thisHtml = $(this).html();
                    var ch = $("<b>").html(thisHtml);
                    $(this).after(ch).remove();
                })
            });

            //step 2: 隐藏真正的协议内容Div
            $("#xynrDiv").hide();
        }
        /** 保存uEditor协议 */
        function saveUEdit(){
            var ueditorText = $(".edui-body-container").text();
            if(!StringUtils.isEmpty(ueditorText)){
                var editorText = $(".edui-body-container").html();//手动获取协议内容;
                $("#xynrDiv").empty().append(editorText).show();
                $(".edui-container").remove();
                return true;
            }else{
                return false;
            }
        }

        /** 保存协议模板 */
        function btnSaveHandler(){
            if($("#XYMBMC,.ZT").QuickValidate()){
                var XYMB = $("body").data("XYMB");
                if(!XYMB){
                    XYMB = {XYMBLX: XYMBLX};
                }

                var saveFlag = saveUEdit();
                if(saveFlag){
                    var content = $(".xymbContent").prop("outerHTML");
                    /*协议页面*/
                    XYMB["CONTENT"] = content.replace(/%/g,"gzbBfh")
                        .replace(/\+/g,"gzbJh");

                    /*是否启用*/
                    XYMB["ZT"] = $(".ZT:checked").val();
                    /*协议模板名称*/
                    XYMB["XYMBMC"] = $("#XYMBMC").val();
                    $.QuickRemote.AjaxJson(contextRoot + "xymb/save", saveHandler, XYMB);
                }else{
                    $.QuickAlert.alertFail({content: "协议不存在内容，请先添加协议内容!",callback:function(){
                        UM.getEditor("ueditorBox").focus(); //编辑器得到焦点
                    }});
                }
            }
        }

        /** 保存协议回调 */
        function saveHandler(result){
            if (result["state"]) {
                $.QuickAlert.alertNormal("保存成功",{callback: function(){
                    btnBackHandler()
                }});
            } else {
                $.QuickAlert.alertFail({
                    content : result.info["faultInfo"]
                });
            }
        }
        
        /**返回按钮*/
        function btnBackHandler(){
            $.QuickUrlUtils.back();
        }
    </script>
</head>
<body class="easyui-layout">
<div region="north" style="height: 41px; border: none; overflow: hidden; background-color: #f9f9f9;">
    <div class="title">
        <h3>家庭协议模板</h3>
    </div>
</div>
<div region="center" style="overflow: auto;width:735px;margin:0 auto;">
    <div style="background-color: #FFF;">
        <table class="form-table" style="margin-bottom: 2px;">
            <tr>
                <td class="td-text">
                    <label>协议模板名称：</label>
                </td>
                <td>
                    <input id="XYMBMC" name="XYMBMC" style="padding-left: 4px;" class="form-control"
                           quick-config="label:'协议模板名称', validateProxy:'notNull length', length: '50'">
                </td>
                <td class="td-text">
                    <label>是否启用：</label>
                </td>
                <td>
                    <input name="ZT" class="ZT" type="radio" value="1" style="width:17px;float:left"
                           quick-config="label:'是否启用', validateProxy:'notNull'">
                    <span style="float:left;margin-right:15px;">是</span>
                    <input name="ZT" class="ZT" type="radio" value="0" style="width:17px;float:left"
                           quick-config="label:'是否启用', validateProxy:'notNull'">否
                </td>
            </tr>
        </table>
    </div>
    <!--<div class="xymbContent" ></div>-->
    <div style="width:690px;margin:0 auto;" id="center" >
        <div th:include="xymb/template-01-01 :: template-01-01" id="modelDiv"></div>
    </div>
</div>
<div region="south" style="height: 41px; border: none; overflow: hidden; background-color: #f9f9f9; padding-top: 6px; text-align: center;">
    <button id="btnSave" type="button" onclick="btnSaveHandler()" style=" margin-left: 10px;">保存</button>
    <button id="btnBack" type="button" onclick="btnBackHandler()" style=" margin-left: 10px;">返回</button>
    <!--<button type="button" onclick="saveUEdit()" style=" margin-left: 10px;">保存编辑</button>-->
</div>
</body>
</html>